<template>
    <div>
       <div  style="width: 98%;border: 0px solid;height: 50px;margin-left: 2%">
         <el-form>
           <el-date-picker
               v-model="beginDate" value-format="YYYY-MM-DD" style="margin-top: 10px;margin-right: 10px"
               type="date" placeholder="请选择起始日期" size="normal" :shortcuts="shortcuts"/>

           <el-date-picker
               v-model="endDate" value-format="YYYY-MM-DD"  style="margin-top: 10px"
               type="date" placeholder="请选择结束日期" size="normal" :shortcuts="shortcuts"/>
          <el-select v-show="false" v-model="method" placeholder="请选择" style="width: 100px;margin-top: 10px;margin-left: 10px" size="normal" >
             <el-option label="总计" value="sum" />
             <el-option label="按日" value="day" />
           </el-select>
           <el-button type="primary" size="normal" style="margin-top: 10px;margin-left: 10px"  @click="load">查询</el-button>
           <el-button type="primary" size="normal" style="margin-top: 10px;margin-left: 10px" v-if="false">导出</el-button>
         </el-form>
       </div>

      <div style="width: 100%;height: 90%;border: 0px solid;display: flex">
        <div id="leftBox" style="width: 65%;height: 100%;border: 0px solid">

            <div v-for="(value,key) in res" :key="key" style="display: flex;border-top: 1px solid;">
               <div style=";width: 16%;border: 0px dashed;font-size: 20px;text-align: center;vertical-align: middle;display: table-cell">{{key}}</div>
              <div style=";width: 14%;border: 0px dashed;font-size: 15px;text-align: center;vertical-align: middle;display: table-cell">{{getDuration(key)}}min</div>
              <div style="width: 70%;border: 0px dashed">
                 <div v-for="(itemValue,itemKey) in value" :key="itemKey" style="margin-top: 0px;border: 0px solid;display: flex">
                    <div style="border: 0px dashed;width: 35%;height: 100%;;margin-bottom: 5px">
                      {{itemValue.project}}
                    </div>
                   <div style="border: 0px dashed;width:15%;height: 100%;margin-bottom: 5px">
                     {{itemValue.duration}}
                   </div>
                   <div style="border: 0px dashed;width: 50%;height: 100%;margin-bottom: 5px">
                     {{itemValue.reportContent}}
                   </div>
                 </div>
               </div>
            </div>
            <div style="font-size: 30px">共{{getDay}}天,{{sumOfTime}}分钟,{{getHours}}小时,日均{{getAvg}}小时</div>

        </div>
        <div id="rightBox" style="width: 25%;height: 100%;border: 0px solid"></div>
      </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import request from "@/utils/request";
import moment from 'moment';

let myChart;

export default {
  name: 'ReportView',
  components: {},
  data() {
    return {
      method: 'sum',
      beginDate: "2024-01-01",
      endDate: new Date(),
      user:{},
      sumOfTime:0,
      day:0,
      res:"",
      typeDuration:{},
      shortcuts : [
            {text: '今天', value: new Date(),},
            {text: '7天前', value: () => {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                return date
              },
            },
            {text: '30天前', value: () => {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
                return date
              },
            },
          ],
      option : {
        title: {
          text: '个人时间比例图',
          subtext: 'username',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}分钟 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '60%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
    }
  },
  created() {
       let userStr = sessionStorage.getItem("user") || "{}"
       let user = JSON.parse(userStr)
       this.user = user;
       this.option.title.subtext = user.username
      //先默认设置结束日期为今天
      this.endDate = new moment(new Date()).format("YYYY-MM-DD")
      //起始日期为7天前
      let date = new Date()
      let lastDate = date.getTime() - 3600 * 1000 * 24 * 6
      this.beginDate = new moment(lastDate).format("YYYY-MM-DD")
  },
  computed:{
    getDay(){
      let end  = moment(this.endDate)
      let begin =moment(this.beginDate)
      let timeDiff = Math.abs(end-begin)
      let diffDays = Math.ceil(timeDiff/(1000 * 60 * 60 *24))
      return diffDays+1
    },
    getHours(){
      let res  = this.sumOfTime/60
      return res.toFixed(1)
    },
    getAvg(){
      let res  = this.getHours/this.getDay
      return res.toFixed(2)
    }
  },
  mounted() {
    this.load();
  },
  unmounted() {
    myChart.dispose();
  },
  methods:{
    load(){
      //加载信息
      request.get("/report/getReport",{
        params:{
          username:this.user.username,
          beginDate:this.beginDate,
          endDate:this.endDate,
          method:this.method,
        }
      }).then(res =>{
        if(res.code==0){
           this.res = res.data.sum
           this.typeDuration = res.data.typeDuration
           this.sumOfTime = res.data.sumOfTime
           this.option.series[0].data = res.data.chartObject

           console.log(this.option.series.data)
           let chartDom = document.getElementById('rightBox');
           myChart = echarts.init(chartDom);

          console.log(this.option)
           this.option && myChart.setOption(this.option);
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    getDuration(type){
       return this.typeDuration[type]
    },
  }
}
</script>
